<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <title>订单列表</title>
    <link rel="stylesheet" href="__CSS__/bootstrap.min.css">
    <link rel="stylesheet" href="__CSS__/hdw.css">
    <link rel="stylesheet" href="__CSS__/reset.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/wechat/cons.css">
    <link rel="stylesheet" type="text/css" href="__CSS__/mobiscroll.custom-2.5.2.min.css">
    <link rel="stylesheet" href="__CSS__/dropload.css">
    <script src="__JS__/vue.js"></script>
    <script src="__JS__/libs/jquery-2.0.2.min.js"></script>
    <script src="__JS__/bootstrap/bootstrap.min.js"></script>
    <script src="__JS__/hdw.js"></script>
    <script type="text/javascript" src="__JS__/mobiscroll.custom-2.5.2.min.js""></script>
    <script src="__JS__/plugin/dropload.js"></script>
    <style>
       
        .section1{
            margin-top: 5px;
        }
        .sectionTop{
            margin-top: 70px;
        }
        .conts{
        	display: flex;
        	height: 28px;
    		line-height: 28px;
        }
        #contentBox .item{
        	display: block;
        	color: #595959;
        	padding: 0 40px;
        	border-bottom: 1px solid #dedede;
        	background: #fff;
        }
       
		.conts1 .name,.conts2 .state{
			/*width: 40vw;*/
			 -webkit-box-flex: 2;
		    -ms-flex: 2;
		    flex: 2;		
		}
		.conts1 .business,.conts2 .stime{
			/*width: 60vw;*/
			 -webkit-box-flex: 3;
		    -ms-flex: 3;
		    flex: 3;	
		    
		}
		.conts1 .business{
			text-align: center;	 
		}
		.state span{
			display: inline-block;
			height: 24px;
    		line-height: 24px;
    		width: 56px;
    		text-align: center;
    		padding: 0 5px;
    		border-radius: 9px;
    		
		}	
		
		.active{    		
    		color:#00BBD3;
    	}
    	#border{
    		height:3px;
			width:calc(100%/3);
			background: #00BBD3;
			display: block;
    	}
		.active_border0{
			margin-left: 0%;
			
		}
		.active_border1{
			margin-left:calc(100%/3);
		}
		.active_border2{
			margin-left:calc(200%/3);
		}
		
		.content [class*="lists"]{
			display: none;
		}
    </style>
</head>
<body>
<div id="contentBox">
    <nav class="navBox">
    	<div class="shadow"></div>
        <ul>        	
			<li tid="0" class="active ">全部</li>
			<li tid="1" >产品订单</li>
			<li tid="2" >工程订单</li>
        </ul>
        <span id="border" class="active_border0 "></span>
    </nav>
    <div class="main">
        <div class="content">
        	<div class="lists0"></div>	   
			<div class="lists1"></div>
			<div class="lists2"></div>
        </div>
    </div>
</div>	

<script type="text/javascript">
	//时间戳
	function timetrans(date,type){
	    var date = new Date(date*1000);//如果date为10位不需要乘1000
	    var Y = date.getFullYear();
	    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
	    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
	    var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
	    var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
	    var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());		    
	    if(type==1){
	    	return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
	    }else if(type==2){
	    	return Y+"/"+M+"/"+D;
	    }	else if(type==3){
          return Y+"/"+M+" "+h+":"+m;
        }	    
	}
	function load(page,type,el){  //上拉下拉刷新，并刚开始会自动加载  	
//		  $("ul").off("click","li");//*****还没有加载，事先解除click绑定
		  $("ul li").removeClass("load");
//		  $(".shadow").show();
    	  $('.content').dropload({
		        scrollArea : window,
		        loadDownFn : function(me){
		            page++;
		            // 拼接HTML
		            var result = '';
		            $.ajax({
		                type: 'post',
		                url: '/index.php/manage/Affairbase/myJuryList',
		                data:{page:page,type:type},
		                dataType: 'json',
//		                async: false ,
		                success: function(res){		                
//		                    var res = JSON.parse(res);
        					if(res.status==1){
        						data = res.data;
        						var arrLen = data.length;
        						console.log(arrLen);
        						var state;
	        					if(arrLen > 0){
//	        						var result = '';
			                        for(var i=0; i<arrLen; i++){									
				      					data[i].time=timetrans(data[i].time,"1");									
										result +='<a href="'+data[i].url+'" class="item" style="margin-bottom: 0;">';
								        result +=      '  <div class="conts1 conts">';
								        result +=           ' <div class="name">'+data[i].typeName+'</div>';
								        result +=            '<div class="business">'+data[i].title+'</div>';
								        result +=        '</div>';
								        result +=       ' <div class="conts2 conts">    '  ;            
								        result +=            '<div class="stime">   '     ;            
								        result +=              '  <span>';
								        result +=                   	'<b>'+data[i].time+'</b>';
								        result +=               ' </span>';
								        result +=          '  </div>';
								        result +=       ' </div>  '     ;        
								        result +=    '</a>';
										 
			                        }
											                      
			                    // 如果没有数据
			                    }else if(arrLen==0){
			                        // 锁定		
			                        me.lock();
			                        // 无数据
			                        me.noData();
			                    }			                

	                        	// *****插入数据到页面，放到最后面，加载完成插入数据后继续绑定click事件	                           
	                           	$(el).append(result);
//	                            setTimeout(function(){
	                            	$("ul li").addClass("load");
//	                            },4000)
								
//	                        	$(".shadow").hide(4000);
	                        
	                            // 每次数据插入，必须重置
	                            me.resetload();
//			                  
        					}   

		                },
		                error: function(xhr, type){
//		                    alert('Ajax error!');
//		                    // 即使加载出错，也得重置
//		                    me.resetload();
		                }
		            });
		        }
		    });
    }
	
	$(function(){
//		$("ul").off("click","li");
		$(".content").find(".lists a").remove();//每次切换列表都要先清空列表
		$(".dropload-down").remove();	
		// 页数
		    var page = 0;		   
			var data;
			var type=0;
		    // dropload
		  	$(".lists0").show();
		  	load(page,type,".lists0");		
	})
	
	$("ul").on("click",".load",function(){
		$(".content").find(".lists a").remove();//每次切换列表都要先清空列表
		$(".dropload-down").remove();
		$(".dropload-down").remove();		
		$(this).addClass("active").siblings(".active").removeClass("active");
//		$(this).addClass("load").siblings(".load").removeClass("load");//解除class的load，让其他不能点击
//		$("ul li").removeClass("load");
		  
		var tid=$(this).attr("tid");
		$("#border").attr("class","active_border"+tid);	
		
		$(".lists"+tid).show().siblings().hide();
		if(tid==0){			//全部
			 // 页数		
		    var page = 0;
			var data;
			var type=0;
		    // dropload
		  	load(page,type,".lists0");
		}else if(tid==1){		 //产品订单	
			var page = 0;
			var data;
			var type=2;
		    // dropload
		  	load(page,type,".lists1");
		}else if(tid==2){       //工程订单
	
			var page = 0;
			var data;
			var type=3;			
		    // dropload
		  	load(page,type,".lists2");
		}
		
	})
</script>
<script>
	/*
    var vm = new Vue({
        el:"#contentBox",
        data:{
            active:0,
            activeColor:["","",""],
            navList:[
                {name:"全部",view:"tab1"},
                {name:"产品订单",view:"tab2"},
                {name:"工程订单",view:"tab3"},
              
            ],  
            lists:[],
	        lists1:[],
	        lists2:[],
	        lists3:[],
	     
        },
        methods:{
            actShow:function(e,i){
                this.active = i;
                var w = $(".navBox ul li").eq(i).outerWidth();
                var left = $(".navBox ul li").eq(i).offset().left;
                $(".navBox .hk").stop().animate({
                    left:left+"px",
                    width:w+"px"
                },300);
//              console.log(i);
                if(i==0){
					this.lists=this.lists1;
				}else if(i==1){
					this.lists=this.lists2;
				}else if(i==2){
					this.lists=this.lists3;
				}
            }
        },
        created(){
        	var url="/index.php/manage/Affairbase/myJuryList";
        	var data;
       		var me=this;
        	$.post(url).then(function(res){       	
        			res = JSON.parse(res);
        			data=res.data;
        			if(data.length>0){
        				for(var i=0;i<data.length;i++){
        					me.lists1.push(data[i]);//全部
        					if(data[i].type==2){//产品订单
        						me.lists2.push(data[i]);
        						data[i].type="产品订单";
//      						me.activeColor[0]="orange";
        					}else if(data[i].type==3){//工程订单
        						me.lists3.push(data[i]);
        						data[i].type="工程订单";
//      						me.activeColor="red";
        					}
        				}
        			} 
        		
        		me.lists=me.lists1;		
//      		console.log(me.lists2);
			});	
        
        },
        mounted:function(){
            var w = $(".navBox ul li").eq(0).outerWidth();
//          $(".navBox .hk").css({width:w+"px"});
        }
    })

	Vue.filter("timetrans",function(date,type){
        var date = new Date(date*1000);//如果date为10位不需要乘1000
        var Y = date.getFullYear();
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1);
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
        var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes());
        var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());        
        if(type==1){
          return Y+"/"+M+"/"+D+" "+h+":"+m+":"+s;
        }else if(type==2){
          return Y+"/"+M+"/"+D;
        } else if(type==3){
          return M+"/"+D+" "+h+":"+m;
        }     
      });
    $(function(){

        var opt = {
            preset:'date', //日期
            theme:'android-ics light',//皮肤样式
            display:'modal', //显示方式
            mode:'scroller', //日期选择模式
            lang:'zh',
            dateFormat:'yy-mm-dd', // 日期格式
            setText:'确定', //确认按钮名称
            cancelText:'取消',//取消按钮
            dateOrder:'yy-mm-dd', //面板中日期排列格式
            width:'100%',
            timeWheels:'HHii', // 24小时制;
            timeFormat:'HH:ii',
            maxDate: new Date(),
            onSelect:function(val){
                var st = $("#startTime").val();
                var et = $("#endTime").val();
            }
        };
        $("#startTime").mobiscroll(opt);
        $("#endTime").mobiscroll(opt);
    })
    */
</script>
</body>
</html>